<template>
	<view class="container">
		<!-- 订单页列表 -->
		<view class="order-list">


			<view class="order-item">
				<view class="order-item-name">上传身份证正面：</view>
			</view>
			<view class="goods-box">
				<view class="imgList" v-if="fileList[0]">
					<image class="del" src="/static/image/delete.png" @click="delImage(0)"></image>
					<image class="imgList" :src="fileList[0]" @click="previewImg(fileList,0)"></image>
				</view>
				<image class="imgList" :src="img_url[0] ? img_url[0] : '/static/image/upload.png'" @click="addImage" v-if="!fileList[0]">
				</image>
			</view>
			
			<view class="order-item">
				<view class="order-item-name">上传身份证反面：</view>
			</view>
			<view class="goods-box">
				<view class="imgList" v-if="fileList[1]">
					<image class="del" src="/static/image/delete.png" @click="delImage(1)"></image>
					<image class="imgList" :src="fileList[1]" @click="previewImg(fileList,1)"></image>
				</view>
				<image class="imgList" :src="img_url[1] ? img_url[1] : '/static/image/upload.png'" @click="addImage" v-if="!fileList[1]">
				</image>
			</view>
			
			
			
			<button type="primary" @click="upload()">上传</button>

		</view>


	</view>
</template>

<script>
	import * as UserApi from '@/api/user'
	import AvatarImage from '@/components/avatar-image'
	import * as UploadApi from '@/api/upload'
	import Api from '@/config'

	// 订单页数据
	// const accountInfo = {
	// 	name: '深圳市鼎盛威电子有限公司',
	// 	code: '811981938510001',
	// 	bank: '招商银行股份有限公司深圳高新园支行',
	// 	juridical_person: '韩亚林'
	// }

	export default {
		components: {
			AvatarImage
		},
		data() {
			return {
				accountInfo:{},
				time: 0,
				fileList: [], // 存储图片的数组，
				urlStr: "", //  后端返回的图片数据拼接
				userInfo: [],
				img_url:{},
				order_id:0,//在我的订单界面点对公转账
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			// console.log('api',this.img_url);
			// console.log('api2',this.fileList);
			
			//获取支付凭证
			if(uni.getStorageSync('card')){
				
				this.img_url[0] = uni.getStorageSync('card')[0];
				this.img_url[1] = uni.getStorageSync('card')[1];
			}

		},

		methods: {

			//返回上一页
			navigateBack() {
				
				uni.navigateBack(1);
			},

			// 预览图片功能
			previewImg(urls, i) {
				// console.log(urls);
				uni.previewImage({
					urls, //所有要预览的图片的地址集合 必须数组形式 
					current: urls[i] //当前图片地址,点击预览哪个预览的哪个传的 i 是索引
				})
			},
			// 新增图片 
			addImage() {
				const max = 1;
				const count = max - this.fileList.length
				uni.chooseImage({
					count: count, // 上传图片最多6个可以自己调
					success: (res) => {
						this.fileList = [...this.fileList, ...res.tempFilePaths]
					}
				})
			},

			// 删除图片
			delImage(id) {
				this.fileList.splice(id, 1)
			},
			upload() {
				var item = this.fileList;
				// var item = this.fileList[0];
				console.log(this.fileList);

				var app = this;
				var card = {};

				if(this.img_url[1] && !this.fileList[0] && !this.fileList[1]){
					//如果没有上传图片
					uni.setStorageSync('is_card',true);
					return uni.navigateBack(1);
				}
				UserApi.info()
					.then(result => {
						const userInfo = result.data.userInfo;
						app.userInfo = userInfo;
						console.log('用户信息', app.userInfo);
						
						item.forEach((filePath, index) => {  
						uni.uploadFile({
							url: Api.apiUrl+'upload/image_prove',
							filePath: item[index],
							name: 'file',
							formData: {
								'user_id': app.userInfo.user_id,
							},
							success: (uploadFileRes) => {
								
								if (uploadFileRes.statusCode == 200) {
									
									console.log('uploadFileRes',uploadFileRes)
									uni.showToast({
										title: '上传成功'
									})
									app.img_url[index] = JSON.parse(uploadFileRes.data).message;
									card[index] = JSON.parse(uploadFileRes.data).message;
									uni.setStorageSync('card',card);
									if(index == 1){
										uni.setStorageSync('is_card',true);
										// 返回上个页面
										setTimeout(()=>{
											uni.navigateBack(1);
										},1500)
									}

								}else{
									console.log('上传失败',uploadFileRes);return;
								}
							},
						
						});
						})


					});

			},

		}
	}
</script>

<style lang="scss" scoped>
	.order-list {
		padding: 0 25rpx;
		background-color: #fff;

		.order-item {
			position: relative;
			padding: 26rpx 16rpx;
			// border-bottom: 1rpx solid #eee;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 30rpx;

			&:last-child {
				border-bottom: none;
			}
		}

		.order-item-icon {
			font-size: 34rpx;
			margin-right: 18rpx;
		}

		.icon-arrow {
			position: absolute;
			top: 26rpx;
			right: 6rpx;
		}
	}

	// 底部操作栏
	.footer {
		position: fixed;
		bottom: var(--window-bottom);
		left: 0;
		right: 0;
		z-index: 11;
		box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
		background: #fff;

		// 设置ios刘海屏底部横线安全区域
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.btn-item {
			font-size: 30rpx;
			height: 90rpx;
			border-radius: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.btn-item-icon {
			font-size: 34rpx;
			margin-right: 18rpx;
		}

	}

	//图片
	.goods-box {
		display: flex;
		flex-wrap: wrap;

		// 图片列表
		.imgList {
			position: relative;
			width: 180rpx;
			height: 180rpx;
			margin: 0 50rpx 30rpx 0;
		}

		// 删除图片
		.del {
			position: absolute;
			width: 60rpx;
			height: 60rpx;
			right: 15rpx;
			z-index: 999;
		}
	}
</style>
